<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form">
      <el-form-item label="宠物名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入宠物名称" clearable size="small" @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="分类" prop="categoryId">
        <el-select v-model="queryParams.categoryId" placeholder="请选择分类" clearable size="small">
          <el-option v-for="item in categoryOptions" :key="item.categoryId" :label="item.categoryName" :value="item.categoryId"/>
        </el-select>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select v-model="queryParams.gender" placeholder="请选择性别" clearable size="small">
          <el-option v-for="item in genderOptions" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="20">
      <el-col :span="6" v-for="pet in petList" :key="pet.petId">
        <el-card :body-style="{ padding: '0px' }" class="pet-card" @click.native="handleViewDetail(pet)">
          <img :src="pet.image || require('@/assets/images/profile.jpg')" class="pet-image">
          <div style="padding: 14px;">
            <div class="pet-name">{{ pet.name }}</div>
            <div class="pet-info">
              <span>{{ pet.age }}岁</span>
              <span>{{ pet.gender === '0' ? '公' : '母' }}</span>
              <span>{{ pet.categoryName }}</span>
            </div>
            <div class="pet-description">{{ pet.description }}</div>
            <div class="bottom">
              <el-button type="primary" size="mini" @click.stop="handleAdopt(pet)"
                :disabled="pet.status !== '0'">
                {{ statusFormat(pet) }}
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList"/>

    <!-- 申请领养对话框 -->
    <el-dialog :title="'申请领养 - ' + form.petName" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入联系电话"/>
        </el-form-item>
        <el-form-item label="居住地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入居住地址"/>
        </el-form-item>
        <el-form-item label="申请理由" prop="reason">
          <el-input v-model="form.reason" type="textarea" placeholder="请输入申请理由"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 宠物详情对话框 -->
    <el-dialog title="宠物详情" :visible.sync="detailOpen" width="600px" append-to-body>
      <el-row :gutter="20" v-if="detailForm">
        <el-col :span="12">
          <el-image :src="detailForm.image || require('@/assets/images/profile.jpg')" fit="cover" style="width: 100%; height: 300px;"/>
        </el-col>
        <el-col :span="12">
          <div class="detail-item">
            <label>宠物名称：</label>
            <span>{{ detailForm.name }}</span>
          </div>
          <div class="detail-item">
            <label>分类：</label>
            <span>{{ detailForm.categoryName }}</span>
          </div>
          <div class="detail-item">
            <label>年龄：</label>
            <span>{{ detailForm.age }}岁</span>
          </div>
          <div class="detail-item">
            <label>性别：</label>
            <span>{{ detailForm.gender === '0' ? '公' : '母' }}</span>
          </div>
          <div class="detail-item">
            <label>状态：</label>
            <span>{{ detailForm.status === '0' ? '可领养' : '已被领养' }}</span>
          </div>
          <div class="detail-item">
            <label>描述：</label>
            <div class="detail-description">{{ detailForm.description }}</div>
          </div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleAdopt(detailForm)" v-if="detailForm && detailForm.status === '0'">申请领养</el-button>
        <el-button @click="detailOpen = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listPet } from "@/api/admin/pet";
import { addAdoption } from "@/api/user/adoption";
import { listCategory } from "@/api/admin/category";

export default {
  name: "PetList",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 宠物列表
      petList: [],
      // 分类选项
      categoryOptions: [],
      // 性别选项
      genderOptions: [
        { value: "0", label: "公" },
        { value: "1", label: "母" }
      ],
      statusOptions: [
        { value: "0", label: "可领养" },
        { value: "1", label: "已领养" },
        { value: "2", label: "领养审核中" }
      ],
      // 是否显示弹出层
      open: false,
      // 是否显示详情弹出层
      detailOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 8,
        name: null,
        categoryId: null,
        gender: null,
        status: '0' // 只查询可领养的宠物
      },
      // 表单参数
      form: {},
      // 详情表单
      detailForm: null,
      // 表单校验
      rules: {
        phone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }
        ],
        address: [
          { required: true, message: "请输入居住地址", trigger: "blur" }
        ],
        reason: [
          { required: true, message: "请输入申请理由", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getList();
    this.getCategoryOptions();
  },
  methods: {
    statusFormat(row) {
      return this.statusOptions.find(item => item.value === row.status)?.label || '';
    },
    /** 查询宠物列表 */
    getList() {
      this.loading = true;
      listPet(this.queryParams).then(response => {
        this.petList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询分类选项 */
    getCategoryOptions() {
      listCategory().then(response => {
        this.categoryOptions = response.rows;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.status = '0'; // 保持只查询可领养的宠物
      this.handleQuery();
    },
    /** 查看详情按钮操作 */
    handleViewDetail(row) {
      this.detailForm = row;
      this.detailOpen = true;
    },
    /** 申请领养按钮操作 */
    handleAdopt(row) {
      this.form = {
        petId: row.petId,
        petName: row.name,
        phone: null,
        address: null,
        reason: null
      };
      this.open = true;
      this.detailOpen = false;
    },
    /** 取消按钮 */
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 表单重置 */
    reset() {
      this.form = {
        petId: null,
        petName: null,
        phone: null,
        address: null,
        reason: null
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addAdoption(this.form).then(response => {
            this.$modal.msgSuccess("申请提交成功");
            this.open = false;
            this.getList();
          }).catch(err => {
            this.cancel();
          })
        }
      });
    }
  }
};
</script>

<style scoped>
.search-form {
  margin-bottom: 20px;
  background: #fff;
  padding: 20px;
  border-radius: 4px;
}
.pet-card {
  margin-bottom: 20px;
  transition: all 0.3s;
  cursor: pointer;
}
.pet-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.pet-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.pet-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
.pet-info {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
}
.pet-info span {
  margin-right: 10px;
}
.pet-description {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.detail-item {
  margin-bottom: 15px;
}
.detail-item label {
  font-weight: bold;
  margin-right: 10px;
}
.detail-description {
  margin-top: 10px;
  color: #666;
  line-height: 1.5;
}
</style>
